<template>
    <Card>
        <div id="charts" style="width: 100%;height: 500px"></div>
    </Card>
</template>

<script>
    import echarts from 'echarts'
    import fetch from '../../utils/fetch'
    //var echarts = require('echarts');


    export default {
        name: 'FactorySale',
        data:{

        },
        methods:{

        },
        mounted:function () {
            fetch({
                url:"/stat/onLineInfo",
                method:"get"
            }).then(resp=>{
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('charts'));
                // 绘制图表
                myChart.setOption(
                    {
                        title: {
                            text: '系统访问压力情况',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis:  {
                            type: 'category',
                            boundaryGap: false,
                            data: resp.data.titles
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} W'
                            },
                            axisPointer: {
                                snap: true
                            }
                        },
                        visualMap: {
                            show: false,
                            dimension: 0,
                            pieces: [{
                                lte: 10,    //  时段(value)<=10
                                color: 'blue'
                            }, {
                                gt: 10,
                                lte: 12,    //     10<时段(value)<=12
                                color: 'red'
                            }, {
                                gt: 12,
                                lte: 18,      //    12<时段(value)<=18
                                color: 'green'
                            }, {
                                gt: 18,
                                lte: 20,     //    18<时段(value)<=20
                                color: 'red'
                            }, {
                                gt: 20,     //     //    20<时段(value)
                                color: 'green'
                            }]
                        },
                        series: [
                            {
                                name:'访问量',
                                type:'line',
                                smooth: true,
                                data: resp.data.values,

                                markArea: {
                                    data: [ [{
                                        name: '早高峰',
                                        xAxis: '09'
                                    }, {
                                        xAxis: '11'
                                    }], [{
                                        name: '晚高峰',
                                        xAxis: '18'
                                    }, {
                                        xAxis: '22'
                                    }] ]
                                }
                            }
                        ]
                    }

                );


                //添加一个监听器
                window.addEventListener("resize",function () {
                    myChart.resize();
                })


            })

        }
    };
</script>

<style scoped>

</style>
